import React, {useState, Fragment, useEffect} from 'react'
import {BrowserRouter as Router, Route, Link} from "react-router-dom"

function Index() {
    useEffect(() => {
        console.log('useEffect=>老弟，你来了！Index页面')
        return () => {
            console.log('老弟，你走了!Index页面')
        }
    },[])
    return <h2>首页</h2>
}

function List() {
    useEffect(() => {
        console.log('useEffect=>老弟，你来了！List页面')
        return () => {
            console.log('老弟，你走了!List页面')
        }
    },[])
    return <h2>列表</h2>
}

export default function Example() {
    const [age, setAge] = useState(18)
    const [sex, setSex] = useState('男')
    const [work, setWork] = useState('前端程序员')
    const [count, setCount] = useState(0)
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)

        return ()=>{
            console.log('====================')
        }
    },[count])

    return (
        <Fragment>
            <p>JSPang 今年:{age}岁</p>
            <p>性别:{sex}</p>
            <p>工作是:{work}</p>

            <p>You clicked {count} times</p>
            <button onClick={() => {
                setCount(count + 1)
            }}>click me
            </button>
            <Router>
                <ul>
                    <li><Link to="/">首页</Link></li>
                    <li><Link to="/list">列表</Link></li>
                </ul>
                <Route path="/" exact component={Index}/>
                <Route path="/list" component={List}/>
            </Router>

        </Fragment>
    )
}

